<template>
  <!-- PC 文章列表 -->
  <b-card class="mb-2 an-main-body">
    <div class="an-list-new">
      <h4>文章列表</h4>
      <div>
        <b-spinner v-if="loading" variant="primary" type="grow" label="Spinning" />
        <ul class="list-unstyled">
          <b-media
            v-for="item in defData.records"
            :key="item.id"
            tag="li"
            class="my-4 an-list-item"
            @click="onLink(item.id)"
          >
            <template v-slot:aside>
              <div class="an-list-img">
                <b-img
                  left
                  :src="item.thumbnail"
                  :blank="item.thumbnail == '' || item.thumbnail == null"
                  blank-color="#abc"
                  width="120px"
                  @click.stop="onLink(item.id)"
                ></b-img>
              </div>
            </template>
            <h5 class="mt-0 mb-1 an-title" @click.stop="onLink(item.id)">{{ item.title }}</h5>
            <p class="mb-0 an-text" @click.stop="onLink(item.id)">{{ item.articleAbstract }}</p>
          </b-media>
        </ul>
      </div>
      <b-pagination
        v-model="getData.page"
        :total-rows="defData.total"
        :per-page="getData.pageSize"
        @change="changePage"
      />
    </div>
  </b-card>
</template>

<script>
import { getList } from "~/assets/services/api";
export default {
  name: "ListPage",
  data() {
    return {
      loading: false,
      getData: {
        pageSize: 10,
        page: 1,
        status: 1,
        columnId: 1,
      },
      defData: {
        records: [],
        total: 0,
      },
    };
  },
  asyncData({ app }) {
    return app.$axios
      .get(`/ECS/sys/article/list`, {
        params: {
          pageSize: 10,
          page: 1,
          status: 1,
          columnId: 1,
        },
      })
      .then((res) => {
        return { defData: res.data.result };
      });
  },
  mounted() {
    //this.getList();
  },
  methods: {
    changePage(pageNum) {
      this.getData.page = pageNum;
      this.getList();
      // this.$router.push('/view/listPage/ ' + pageNum );
      // location.reload();
    },
    getList() {
      this.loading = true;
      this.defData.records = [];
      getList(this.getData).then((res) => {
        this.loading = false;
        this.defData = res;
      });
    },
    onLink(id) {
      this.$router.push("/view/contPage/" + id);
    },
  },
};
</script>

<style scoped>
.an-list-new {
  margin: 20px 0;
}
.an-text {
  color: #999999;
}
</style>
